<template>
  <el-card shadow="hover" class="image-card" > <!-- 高度可以自定义 -->
    <div class="image-container">
      <el-image
        class="half-image"
        :src="basicData"
        :zoom-rate="1.2"
        :max-scale="7"
        :min-scale="0.2"
        show-progress
        fit="cover"
      />
      <el-image
        class="half-image"
        :src="process"
        :zoom-rate="1.2"
        :max-scale="7"
        :min-scale="0.2"
        show-progress
        fit="cover"
      />
    </div>
  </el-card>
</template>

<script setup name="Index" lang="ts">

import process from '@/assets/images/process.png';
import basicData from '@/assets/images/basic-data.png';
const srcList = [
  '@/assets/images/process.png'
]

const goTarget = (url: string) => {
  window.open(url, '__blank');
};
</script>

<style lang="scss" scoped>

//.image-card {
//  width: 700px; /* 设置卡片的宽度 */
//  height: 700px; /* 设置卡片的高度 */
//}


.image-card {
  margin-top: 20px;
  margin:auto; /* 让图片居中 */
  width: 99%;  /* 你可以改成固定宽度或让父元素控制 */
  height: 100%; /* 也可以绑定变量或百分比 */
  padding: 0;   /* 移除默认内边距，确保图片贴边显示 */
}

.image-container {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.half-image {
  padding: 50px;
  flex: 1;
  width: 100%;
  object-fit: cover;
}

</style>
